<template>

    <div class="news">
        <header/>
        <h2>{{title}}</h2>
            <Slider></Slider>
        <ul>
            <li v-for="item of news" :key="item.index">
                <router-link tag="div" class="items" :to="'/newsinfo/'+item.Id">
                    <span>{{ item.Title }}</span>
                    <i>{{item.CreateDate}}</i>
                </router-link>
            </li>
        </ul>
        <div class="getmore" @click="getmore" >{{more}}</div>
        <Footer/>
    </div>
</template>
<script>
import axios from 'axios'
import base from '../../assets/js/base.js'
import Slider from '../../components/tools/concise-slider'
import Header from '../../components/public/header'
import Footer from '../../components/public/footer'

import { Toast } from 'mint-ui';

export default {
  components:{
        Slider,
        Header,
        Footer
    },
     activated(){
     console.log('active')
    },
  data() {
    return{
      title:'最新动态',
      param:{
            page:1,
            limit:5,
            categoryid:0
      }, 
      more:'加载更多',   
      news:[]
     
    }
  },
   created:function(){  
        this.getmore()
        
    },
    methods:{
        //  async loadnews () {
        //     const d = await axios.get(base.webapi+'Article/GetList',
        //     {
        //         params:this.param
        //     })
           
        //     console.log(d.data)
        //     this.news=d.data.data
        //  },
        async  getmore(){
            Toast({
                message: '页面加载中',
                position: 'bottom',
                duration: 5000
                });
           this.more="正在加载中..."
            const d = await axios.get(base.webapi+'Article/GetList',
            {
                params:this.param
            })
            if(d.data.data.length==0){
            this.more='无更多数据'
            }
            else{
                    for(var i=0;i<d.data.data.length;i++){
                        this.news.push(d.data.data[i])
                    }
                  this.more='加载更多'
                  this.param.page+=1
            }
             
        }
    
    }
}
</script>
<style>
    .news h2{ line-height: 25px; text-align: center}
    .news ul li{ 
        padding: .3125rem .5em;
        border-bottom: 1px solid #ddd;}
    .news ul li span{font-size: 1em;  
    font-weight: normal; color:#40485b;
    padding: 8px 0px;}
    .getmore{text-align: center; background-color: #ccc; line-height: 35px; border-radius: 10px}
    .items i{color: #9b9b9b}
</style>
